<template>
  <div class="progress-bar" ref="progressBar" @click='progressClick'>
    <div class="bar-inner">
      <div class="progress" ref="progress"></div>
      <div class="progress-btn-wrapper" ref="progressBtn"
            @touchstart.prevent="progressTouchStart"
            @touchmove.prevent="progressTouchMove"
            @touchend="progressTouchEnd"
      >
        <div class="progress-btn"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {prefixStyle} from 'common/js/dom'

  const transform = prefixStyle('transform')
  const progressBtnWidth = 16
  export default {
    computed: {

    },
    props:{
      percent: {
        type: Number,
        default: 0 
      }
    },
    created() {
      this.touch = {

      }
    },
    methods: {
      progressTouchStart(e) { //记录手指触摸开始的位置
        this.touch.initiated = true
        this.touch.startX = e.touches[0].pageX
        this.touch.left = this.$refs.progress.clientWidth //触摸开始的时候进度条的宽度
      },
      progressTouchMove(e) { //手指移动的时候改变进度条的宽度
        if(!this.touch.initiated) {
          return
        }
        //手指移动的x方向差值
        let delx = e.touches[0].pageX - this.touch.startX 
        // Math.max(0,this.touch.left + delx) 手指可能反向移动 取0与初始进度条宽度相加(可能为负)的最大值
          // 偏移的最大值为整个进度条的最大宽度
        let offsetWidth = Math.min(Math.max(0,this.touch.left + delx), this.$refs.progressBar.clientWidth - progressBtnWidth)
        this._offset(offsetWidth)
      },
      progressTouchEnd(e) { //触摸结束重新触发_percentChange()
        this.touch.initiated = false
        this._percentChange()
      },
      progressClick(e) {
        //方法1
        // let react = this.$refs.progressBar.getBoundingClientRect()
        // let offsetWidth = e.pageX - react.left
        // this._offset(offsetWidth)
        //方法2
        this._offset(e.offsetX - progressBtnWidth)
        this._percentChange()
      },
      _percentChange() {
        let BarWidth = this.$refs.progressBar.clientWidth - progressBtnWidth
        let percent = this.$refs.progress.clientWidth / BarWidth
        this.$emit('percentChange', percent)
      },
      _offset(offsetWidth) {
        this.$refs.progress.style.width = `${offsetWidth}px`
        this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
      }
    },
    watch:{
      percent(newPercent) {
        //this.touch.initiated=true 状态下手指正在滑动 进度条的位置会根据播放进度再跳转
        if(newPercent >= 0 && !this.touch.initiated) {
          let offsetWidth = (this.$refs.progressBar.clientWidth - progressBtnWidth) * newPercent
        this._offset(offsetWidth)
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .progress-bar
    height: 30px
    .bar-inner
      position: relative
      top: 13px
      height: 4px
      background: rgba(0, 0, 0, 0.3)
      .progress
        position: absolute
        height: 100%
        background: $color-theme
      .progress-btn-wrapper
        position: absolute
        left: -8px
        top: -13px
        width: 30px
        height: 30px
        .progress-btn
          position: relative
          top: 7px
          left: 7px
          box-sizing: border-box
          width: 16px
          height: 16px
          border: 3px solid $color-text
          border-radius: 50%
          background: $color-theme
</style>